<template>
	<view class="InventoryManagement" v-show="init">
		<view class="search" v-if="type">
			<u-search placeholder="搜索" v-model="search.code" @search="onSerach" @custom="onSerach" shape="square" :action-style="style" style="width: 100%;"></u-search>
			<view class="icon" @click="openscan"><u-icon name="scan" size="70" color="#3297ef"></u-icon></view>
		</view>
		<view class="search" v-else>
			<u-search
				placeholder="搜索"
				v-model="search.name"
				@search="onSerach"
				@custom="onSerach"
				@clear="initPage()"
				shape="square"
				:action-style="style"
				style="width: 100%;"
			></u-search>
		</view>
		<view class="box" v-for="(item, index) in dataList" :key="index">
			<view class="box-title ">产品条码：{{ item.num }}</view>
			<view class="box-item">
				<image class="item-img" :src="item.img?item.img:require('../../static/nopic2.png')" mode=""></image>
				<view class="item-cont">
					<text class="cont-tit u-line-1">{{ item.pro_name }}</text>
					<text class="tip mb-10 u-line-1">商品属性:{{ item.name }}</text>
					<text class="tip u-line-1">库存:{{ item.stock_num }}</text>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn-item">
					<view class="Warehousing" @click="stock('', index)">产品入库</view>
					<view class="Warehousing ml-20" @click="stock('1', index)">产品出库</view>
				</view>
			</view>
		</view>
		<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>
	</view>
</template>

<script>
import { adminPost } from '@/common/http.request.js';
import { wxScanCode } from '@/utils/uniPromise.js';
import { mapState, mapActions } from 'vuex';
import { pagingMixin } from '@/mixins/sysPaging.js';
export default {
	mixins: [pagingMixin],
	data() {
		return {
			init: false,
			style: {
				backgroundColor: '#3297ef',
				color: '#fff',
				lineHeight: '64rpx',
				margin: '0',
				width: '100rpx',
				borderRadius: '0 10rpx 10rpx 0'
			},
			type: '',
			dataList: {},
			search: {
				name: '',
				code: ''
			}
		};
	},
	onLoad(options) {
		if (options.type) {
			this.type = options.type;
			this.openscan(true);
		} else {
			this.initPage();
		}
	},
	computed: {
		...mapState(['vuex_adminuser'])
	},
	onReachBottom: function() {
		this.loadMore();
	},
	onPullDownRefresh: function() {
		this.initPage();
		uni.stopPullDownRefresh();
	},
	methods: {
		initPage(params) {
			this.init = true;
			this._init_data('GetProductStockAllList', { business_id: this.vuex_adminuser.pk_id, ...this.search });
		},
		loadMore() {
			this._load_data();
		},
		openscan(isInit) {
			wxScanCode({ onlyFromCamera: true })
				.then(res => {
					this.search.code = res.result;
					this.initPage();
					// console.log(res.result)
				})
				.catch(() => {
					if (isInit) {
						this.initPage();
					}
				});
		},
		onSerach() {
			this.initPage();
		},
		stock(type, idx) {
			this.$linkTo(`/package/system/erp/stock/Productlibrary?type=${type}&index=${idx}`);
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.InventoryManagement {
	.mb-10 {
		margin-bottom: 10rpx;
	}
	.ml-20 {
		margin-left: 20rpx;
	}
	.search {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-top: 1rpx solid #f9f9f9;
		.icon {
			margin-left: 20rpx;
		}
	}
	.box {
		background-color: #fff;
		width: 690rpx;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		.box-title {
			margin-bottom: 20rpx;
			position: relative;
			&::after {
				content: '';
				width: 10rpx;
				height: 28rpx;
				background-color: #3297ef;
				position: absolute;
				left: -20rpx;
				top: 6rpx;
			}
		}
		.box-item {
			display: flex;
			padding: 30rpx 0;
			border-top: 1px solid #f8f8f8;
			border-bottom: 1px solid #f8f8f8;
			.item-img {
				width: 320rpx;
				height: 175rpx;
			}
			.item-cont {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				width: 100%;
				.cont-tit {
					font-size: 28rpx;
					font-weight: bold;
					padding-bottom: 40rpx;
				}
				.tip {
					color: #999999;
				}
			}
		}
		.btn-box {
			padding: 30rpx 0 10rpx;
			display: flex;
			justify-content: flex-end;
			.btn-item {
				display: flex;
				.Warehousing {
					width: 160rpx;
					line-height: 60rpx;
					background-color: #3297ef;
					color: #fff;
					text-align: center;
					border-radius: 10rpx;
				}
			}
		}
	}
}
</style>
